{%- assign first_3d_model = product.media | where: "media_type", "model" | first -%}
{%- if first_3d_model -%}
  <script type="application/json" id="ProductJSON-{{ product.id }}">
    {{ product.media | where: 'media_type', 'model' | json }}
  </script>
  <script src="{{ 'product-model.js' | asset_url }}" defer></script>
{%- endif -%}
{% style %}
  .product__xr-button {
    background: rgba(var(--color-foreground), 0.08);
    color: rgb(var(--color-foreground));
    margin: 1rem auto;
    box-shadow: none;
    display: flex;
    z-index: 1;
  }
  .button.product__xr-button:hover {
    box-shadow: none;
  }
  .product__xr-button[data-shopify-xr-hidden] {
    visibility: hidden;
  }
  .shopify-design-mode .product__xr-button[data-shopify-xr-hidden] {
    display: none;
  }
  @media screen and (max-width: 749px) {
    slider-component .product__xr-button {
      display: none;
    }
    .active .product__xr-button:not([data-shopify-xr-hidden]) {
      display: block;
    }
  }
  @media screen and (min-width: 750px) {
    slider-component + .button.product__xr-button {
      display: none;
    }
    .product__xr-button[data-shopify-xr-hidden] {
      display: none;
    }
  }
  .product__xr-button .icon {
    width: 1.4rem;
    margin-right: 1rem;
  }
{% endstyle %}

{% style %}
  body[data-template="product"] {
    padding-bottom: 4.6875rem;
  }
  @media screen and (max-width: 1152px) {
    body[data-template="product"] {
      padding-bottom: 7rem;
    }
  }
{% endstyle %}
{% stylesheet %}
  {%- comment -%}Advert 信息之间的间距为 1em，最后一个正常 {%- endcomment -%}
  .payment-icons>img {
    margin-bottom: .25rem;
    margin-right: .25rem;
  }
  .payment-icons {
    margin-right: -.25rem;
  }
{% endstylesheet %}
{%- liquid
  assign current_variant = product.selected_or_first_available_variant
-%}

{% comment %} 在购买页中以变体图片为节点，将产品图分组，形如 A1 $$ B1;;B2;;B3 $$ C1;;C2 {% endcomment %}
{%- capture image_list -%}
  {%- for product_image in product.images -%}
    {%- if product_image.variants.first.id != blank -%}
      {%- comment -%} If product image is attached to a variant, image.attached_to_variant not working! {%- endcomment -%}
      {%- unless forloop.first -%}$${%- endunless -%}
      {{ product_image.id }}::{{ product_image.position }}||{{ product_image.alt }}
    {%- else -%}
      {%- unless forloop.first -%};;{%- endunless -%}{{ product_image.position }}||{{ product_image.alt }}
    {%- endif -%}
  {%- endfor -%}
{%- endcapture -%}

{%- liquid
  assign show_video = false
  for media in product.media
    if media.media_type == 'external_video' or media.media_type == 'video'
      assign show_video = true
      assign current_video = media
      break
    endif
  endfor


  case section.settings.desktop_media_size
    when 'small'
      assign media_column = 'col-lg-6'
      assign info_column = 'col-lg-6'
    when 'medium'
      assign media_column = 'col-lg-7'
      assign info_column = 'col-lg-5'
    when 'large'
      assign media_column = 'col-lg-7'
      assign info_column = 'col-lg-5'
  endcase

  case section.settings.deskyop_layout
    when 'thumbnails'
      assign show_thumbnails = true
    when 'no_thumbnails'
      assign show_thumbnails = false
  endcase

-%}

<link rel="stylesheet" href="{{ 'media-gallery.min.css' | asset_url }}">
<div class="purchase-section as-purchase-section mb-6 mb-lg-7 mt-0 mt-md-6 mt-lg-7 as-main-product-v2-container">
  <input class="as-main-product-v2-script" type="hidden" value="{{ 'main-product-v2.min.js' | asset_url }}" {% if request.design_mode %}data-design-mode="yes"{% endif %}>
  <div class="container media-wrap-container">
    <div class="row gx-lg-7 media-wrap-row">
      <div class="col-12 {{ media_column }} media-wrap-col">
        <div class="sticky-top-section gallery-wrap">
          <div class="button_cover_app_block">
            <div class="cover_app_block">
              <button type="button" class="custom-button" id="custom_tryonbutton" style="visibility:hidden;border: none;background: transparent;box-shadow: none;outline: none;">
                <a href="javascript:void(0);" class="btn btn-pri">
                  {{ section.settings.try_on_svg }}
                  <span class="text_try">{{ section.settings.try_on_text }}</span>
                </a>
              </button>
            </div>
          </div>
        {%- for variant in product.variants -%}
          {% capture variant_image_strs %}{%- render 'get-product-images-by-variant-id', image_list: image_list, target_variant: variant, all_images: product.images -%}{% endcapture %}

          {%- liquid
            assign variant_image_strs = variant_image_strs | split: ';;'
          -%}
          <media-gallery class="as-gallery-wrapper {% if current_variant.id != variant.id %}d-none{% endif %}" data-variant-id="{{ variant.id }}">
            <div>
              <script class="as-media-tab-template" type="text/x-handlebars-template">
                <div class="swiper-pagination-bullet badge d-flex align-items-center">{% render 'icon-gallery' %}<span class="text-wrap">{{ 'products.product_gallery.photos' | t }}</span></div>
              </script>
              {%- if show_video -%}
              <script class="as-media-tab-template" type="text/x-handlebars-template">
                <div class="swiper-pagination-bullet badge d-flex align-items-center">{% render 'icon-video' %}<span class="text-wrap">{{ 'products.product_gallery.video' | t }}</span></div>
              </script>
              {%- endif -%}
              {%- if first_3d_model -%}
                <script class="as-media-tab-template" type="text/x-handlebars-template">
                  <div class="swiper-pagination-bullet badge d-flex align-items-center">{% render 'icon-3d' %}<span class="text-wrap">{{ 'products.product_gallery.3d' | t }}</span></div>
                </script>
              {%- endif -%}
            </div>

            <div class="swiper as-media-swiper-outside">
              <div class="swiper-wrapper">
                <div class="swiper-slide as-outer-slide outer-slide">
                  <div class="swiper as-media-swiper-inside media-swiper-inside" {% if show_thumbnails %}data-thumbnails="true"{% endif %}>
                    <div class="swiper-wrapper">
                      {%- for variant_image_str in variant_image_strs -%}
                        {%- liquid
                          assign variant_image = variant_image_str | split: '||'
                          assign variant_image_pos = variant_image[0] | plus: 0 | minus: 1
                          assign variant_image_alt = variant_image[1]
                        -%}
                        {%- assign image = product.images[variant_image_pos] -%}
                        <div class="swiper-slide ratio ratio-4x3">
                          <figure class="mb-0 d-flex justify-content-center bg-gray-100 rounded-bottom-right-md-1 rounded-bottom-left-md-1  rounded-top-left-md-1 rounded-top-right-md-1 ">
                            {% if image != blank %}
                              <picture>
                                <img
                                  style="margin:0 auto;"
                                  class="w-auto h-100 object-fit-cover d-block"
                                  srcset="{%- if image.width >= 420 -%}{{ image | img_url: '420x' }} 420w,{%- endif -%}
                                          {%- if image.width >= 720 -%}{{ image | img_url: '720x' }} 720w,{%- endif -%}
                                          {%- if image.width >= 840 -%}{{ image | img_url: '840x' }} 840w,{%- endif -%}
                                          {%- if image.width >= 900 -%}{{ image | img_url: '900x' }} 900w,{%- endif -%}
                                          {%- if image.width >= 1440 -%}{{ image | img_url: '1440x' }} 1440w,{%- endif -%}
                                          {%- if image.width >= 1880 -%}{{ image | img_url: '1880x' }} 1880w,{%- endif -%}
                                          {{ image | img_url: 'master' }} {{ image.width }}w"
                                  sizes="(min-width: 1440px) 900px, (min-width: 768px) 720px, calc(100vw)"
                                  src="{{ image | img_url: '600x600' }}"
                                  alt="{{ variant_image_alt | escape }}"
                                  loading="lazy"
                                  width="900"
                                  height="900" >
                              </picture>
                            {% else %}
                              <picture>
                                <div class="object-fit-cover img-placeholder h-100">
                                  {{ 'image' | placeholder_svg_tag: 'placeholder-svg h-100 w-100' }}
                                </div>
                              </picture>
                            {% endif %}
                          </figure>
                          <modal-opener class="media-icon">
                            <div class="as-modal-trigger w-100 h-100" data-current-index="0" data-bs-toggle="modal" data-bs-target="#as-gallery-modal-{{variant.id}}">
                            </div>
                          </modal-opener>
                        </div>
                      {%- endfor -%}
                    </div>
                    {%- if variant_image_strs.size > 1 -%}
                      <div class="as-inside-prev swiper-button-prev d-none d-md-block">
                        <span>{% render 'icon-chevron-circle-left' %}</span>
                      </div>
                      <div class="as-inside-next swiper-button-next d-none d-md-block">
                        <span>{% render 'icon-chevron-circle-right' %}</span>
                      </div>
                      <div class="as-inside-pagination swiper-pagination inside-swiper-pagination">
                      </div>
                    {%- endif -%}
                  </div>
                  {%- if show_thumbnails -%}
                    {%- if variant_image_strs.size > 1 -%}
                      <thumbnail-gallery class="thumbnail-swiper as-thumbnail-gallery d-none d-md-block">
                        <div class="position-relative ">
                          <div thumbsSlider="" class="swiper as-gallery-thumnails-swiper opacity-0">
                            <div class="swiper-wrapper">
                              {%- for variant_image_str in variant_image_strs -%}
                                {%- liquid
                                  assign variant_image = variant_image_str | split: '||'
                                  assign variant_image_pos = variant_image[0] | plus: 0 | minus: 1
                                  assign variant_image_alt = variant_image[1]
                                -%}
                                {%- assign image = product.images[variant_image_pos] -%}
                                <div class="swiper-slide">
                                  <figure class="ratio ratio-1x1 mb-0">
                                    {% if image != blank %}
                                      <picture>
                                        <img class="object-fit-cover" width="64" height="64"
                                          srcset="{{ image | img_url: '64x64' }} 1x, {{ image | img_url: '64x64', scale: 2 }} 2x"
                                          src="{{ image | img_url: '64x64' }}"
                                          loading="lazy"
                                          alt="{{ variant_image_alt | escape }}">
                                      </picture>
                                    {% else %}
                                      <picture>
                                        <div class="object-fit-cover img-placeholder">
                                          {{ 'image' | placeholder_svg_tag: 'placeholder-svg' }}
                                        </div>
                                      </picture>
                                    {% endif %}
                                  </figure>
                                </div>
                              {%- endfor -%}
                            </div>
                          </div>
                          {%- if variant_image_strs.size > 6 -%}
                              <div class="as-inside-prev swiper-button-prev d-none d-md-flex flex-column justify-content-center">
                                <div>{% render 'icon-chevron-left' %}</div>
                              </div>
                              <div class="as-inside-next swiper-button-next d-none d-md-flex flex-column justify-content-center">
                                <div>{% render 'icon-chevron-right' %}</div>
                              </div>
                            {%- endif -%}
                        </div>
                      </thumbnail-gallery>
                    {%- endif -%}
                  {%- endif -%}
                </div>
                {%- if show_video -%}
                <div class="swiper-slide as-outer-slide outer-slide">
                  <div class="ratio ratio-4x3 mb-0 video-bg rounded-bottom-right-md-1 rounded-bottom-left-md-1  rounded-top-left-md-1 rounded-top-right-md-1  overflow-hidden">
                    <modal-opener class="d-block d-md-none" data-modal="#as-video-modal-{{product.id}}">
                      <div class="media-icon icon-wrap-xl" data-bs-toggle="modal" data-bs-target="#as-video-modal-{{product.id}}">
                        {%- render 'icon-play-circle' -%}
                      </div>
                      <img
                        srcset="{% if current_video.preview_image.width >= 493 %}{{ current_video.preview_image | img_url: '493x' }} 493w,{% endif %}
                          {% if current_video.preview_image.width >= 600 %}{{ current_video.preview_image | img_url: '600x' }} 600w,{% endif %}
                          {% if current_video.preview_image.width >= 713 %}{{ current_video.preview_image | img_url: '713x' }} 713w,{% endif %}
                          {% if current_video.preview_image.width >= 823 %}{{ current_video.preview_image | img_url: '823x' }} 823w,{% endif %}
                          {% if current_video.preview_image.width >= 990 %}{{ current_video.preview_image | img_url: '990x' }} 990w,{% endif %}
                          {% if current_video.preview_image.width >= 1100 %}{{ current_video.preview_image | img_url: '1100x' }} 1100w,{% endif %}
                          {% if current_video.preview_image.width >= 1206 %}{{ current_video.preview_image | img_url: '1206x' }} 1206w,{% endif %}
                          {% if current_video.preview_image.width >= 1346 %}{{ current_video.preview_image | img_url: '1346x' }} 1346w,{% endif %}
                          {% if current_video.preview_image.width >= 1426 %}{{ current_video.preview_image | img_url: '1426x' }} 1426w,{% endif %}
                          {% if current_video.preview_image.width >= 1646 %}{{ current_video.preview_image | img_url: '1646x' }} 1646w,{% endif %}
                          {% if current_video.preview_image.width >= 1946 %}{{ current_video.preview_image | img_url: '1946x' }} 1946w,{% endif %}
                          {{ current_video.preview_image | img_url: 'master' }} {{ current_video.preview_image.width }}w"
                        src="{{ current_video | img_url: '1946x' }}"
                        class="w-100 h-100 object-fit-cover"
                        sizes="(min-width: 1920px) {{ 1920 | minus: 100 | times: 0.5 | round }}px, (min-width: 990px) calc({{ 0.5 | times: 100 }}vw - 10rem), (min-width: 750px) calc((100vw - 11.5rem) / 2), calc(100vw - 4rem)"
                        loading="lazy"
                        width="973"
                        height="{{ 973 | divided_by: current_video.preview_image.aspect_ratio | ceil }}"
                        alt="{{ current_video.preview_image.alt | escape }}"
                      >
                    </modal-opener>
                    {% if current_video.media_type == 'video' %}<video-preview>
                      {% endif %}
                      {% if current_video.media_type == 'video' %}
                        {% assign custom_style = 'd-none d-md-block w-100 h-100' %}
                      {% else %}
                        {% assign custom_style = 'd-none d-md-block w-100' %}
                      {% endif %}
                      {%- render 'product-deferred-media', media: current_video, loop: section.settings.enable_video_looping, custom_class: custom_style, custom_video_class: 'w-100 h-100 object-fit-cover', auto_play: false -%}
                    {% if current_video.media_type == 'video' %}
                    <div class="d-none d-md-block as-video-poster video-poster">
                      <div class="media-icon icon-wrap-xl as-video-play">
                        {%- render 'icon-play-circle' -%}
                      </div>
                      <img
                        srcset="{% if current_video.preview_image.width >= 493 %}{{ current_video.preview_image | img_url: '493x' }} 493w,{% endif %}
                          {% if current_video.preview_image.width >= 600 %}{{ current_video.preview_image | img_url: '600x' }} 600w,{% endif %}
                          {% if current_video.preview_image.width >= 713 %}{{ current_video.preview_image | img_url: '713x' }} 713w,{% endif %}
                          {% if current_video.preview_image.width >= 823 %}{{ current_video.preview_image | img_url: '823x' }} 823w,{% endif %}
                          {% if current_video.preview_image.width >= 990 %}{{ current_video.preview_image | img_url: '990x' }} 990w,{% endif %}
                          {% if current_video.preview_image.width >= 1100 %}{{ current_video.preview_image | img_url: '1100x' }} 1100w,{% endif %}
                          {% if current_video.preview_image.width >= 1206 %}{{ current_video.preview_image | img_url: '1206x' }} 1206w,{% endif %}
                          {% if current_video.preview_image.width >= 1346 %}{{ current_video.preview_image | img_url: '1346x' }} 1346w,{% endif %}
                          {% if current_video.preview_image.width >= 1426 %}{{ current_video.preview_image | img_url: '1426x' }} 1426w,{% endif %}
                          {% if current_video.preview_image.width >= 1646 %}{{ current_video.preview_image | img_url: '1646x' }} 1646w,{% endif %}
                          {% if current_video.preview_image.width >= 1946 %}{{ current_video.preview_image | img_url: '1946x' }} 1946w,{% endif %}
                          {{ current_video.preview_image | img_url: 'master' }} {{ current_video.preview_image.width }}w"
                        src="{{ current_video | img_url: '1946x' }}"
                        class="w-100 h-100 object-fit-cover"
                        sizes="(min-width: 1920px) {{ 1920 | minus: 100 | times: 0.5 | round }}px, (min-width: 990px) calc({{ 0.5 | times: 100 }}vw - 10rem), (min-width: 750px) calc((100vw - 11.5rem) / 2), calc(100vw - 4rem)"
                        loading="lazy"
                        width="973"
                        height="{{ 973 | divided_by: current_video.preview_image.aspect_ratio | ceil }}"
                        alt="{{ current_video.preview_image.alt | escape }}"
                      >
                    </div>
                    </video-preview>{% endif %}
                  </div>
                </div>
                {%- endif -%}
                {%- if first_3d_model -%}
                   {% comment %} <div class="swiper-slide as-outer-slide outer-slide">
                    <div class="ratio ratio-1x1 mb-0 bg-default">
                      <deferred-media data-type="model" class="deferred-media">
                        <template>
                          <iframe class="model-iframe w-100 h-100" allow="fullscreen" src="{{current_model.src_3d}}" frameborder="0"></iframe>
                        </template>
                      </deferred-media>
                    </div>
                  </div> {% endcomment %}
                  <div class="swiper-slide as-outer-slide outer-slide swiper-no-swiping">
                    <div class="ratio ratio-4x3 mb-0 bg-default">
                      <product-model class="product-media product-media--model product-media--frame"
                        data-media-type="{{ first_3d_model.media_type }}"
                        data-media-id="{{ first_3d_model.id }}">
                        <button
                          class="product__xr-button bg-transparent border-0 end-0 p-0 position-absolute rounded-0 top-0"
                          type="button"
                          aria-label="{{ 'products.product.xr_button_label' | t }}"
                          data-shopify-xr
                          data-shopify-model3d-id="{{ first_3d_model.id }}"
                          data-shopify-title="{{ product.title | escape }}"
                          data-shopify-xr-hidden
                        >
                          {% render 'icon-3d-model' %}
                        </button>
                          {{ first_3d_model | model_viewer_tag: image_size: 'master', loading: lazy, reveal: auto, toggleable: true, data-model-id: first_3d_model.id, touch-action: none,
                          class: 'w-100 h-100', preload: true, touch-action: 'none' }}
                      </product-model>
                    </div>
                  </div>
                {%- endif -%}
              </div>
              <div class="as-outside-pagination media-tab">
              </div>
            </div>
          </media-gallery>
        {% endfor %}
        </div>
      </div>
      <div class="col-12 {{ info_column }} info-wrap-col">
        {% render 'product-info-new', showNotifyMe: section.settings.show_notify_me, hiddenAddToCart: section.settings.hide_add_to_cart, subscribe_tag: section.settings.subscribe_tag%}
        {% render 'notify-me', showNotifyMe: section.settings.show_notify_me, heading: section.settings.notify_me_heading, text: section.settings.notify_me_text, note: section.settings.notify_me_note %}
      </div>
    </div>
  </div>

  {%- if show_video -%}
    <video-modal class="modal" id="as-video-modal-{{product.id}}" tabindex="-1">
      <div class="modal-dialog modal-fullscreen bg-default">
        <div class="modal-content">
          <div class="modal-close-btn" data-bs-dismiss="modal">
            {%- render 'icon-close-circle' -%}
          </div>
          <div class="modal-body h-100 p-0">
            <div class="h-100 modal-media-wrap">
              {% if current_video.media_type == 'external_video' and current_video.host == 'youtube'  %}<div class="ratio ratio-16x9">{% endif %}
                {%- render 'product-deferred-media', media: current_video, loop: section.settings.enable_video_looping, custom_class: 'w-100', custom_video_class: 'w-100', auto_play: true -%}
                {% if current_video.media_type == 'external_video' and current_video.host == 'youtube'  %}</div>{% endif %}
            </div>
          </div>
        </div>
      </div>
    </video-modal>
  {%- endif -%}

  {%- for variant in product.variants -%}
    {% capture variant_image_strs %}{%- render 'get-product-images-by-variant-id', image_list: image_list, target_variant: variant, all_images: product.images -%}{% endcapture %}
    {%- liquid assign variant_image_strs = variant_image_strs | split: ';;' -%}
    <gallery-modal data-current-index="0" class="modal gallery-modal" id="as-gallery-modal-{{variant.id}}" tabindex="-1">
      <div class="modal-dialog modal-fullscreen bg-default">
        <div class="modal-content">
          <div class="modal-close-btn" data-bs-dismiss="modal">
            {%- render 'icon-close-circle' -%}
          </div>
          <div class="modal-body p-0">
            <div class="swiper as-media-swiper-inside media-swiper-inside h-100" {% if show_thumbnails %}data-thumbnails="true"{% endif %}>
              <div class="swiper-wrapper as-swiper-wrapper" data-swiper-number="{{ variant_image_strs.size }}">
                {%- for variant_image_str in variant_image_strs -%}
                  {%- liquid
                    assign variant_image = variant_image_str | split: '||'
                    assign variant_image_pos = variant_image[0] | plus: 0 | minus: 1
                    assign variant_image_alt = variant_image[1]
                  -%}
                  {%- assign image = product.images[variant_image_pos] -%}
                  <div class="swiper-slide">
                    <div class="h-100">
                      <div class="d-flex align-items-center h-100">
                        <figure class="ratio ratio-1x1 mb-0 text-center">
                          {% if image != blank %}
                            <picture>
                              <source media="(max-width: 575px)"
                                srcset="{{ image | img_url: '375x375' }} 1x, {{ image | img_url: '375x375', scale: 2 }} 2x" />
                              <img class="h-100 object-fit-cover" width="auto" height="auto"
                                srcset="{{ image | img_url: '1200x1200' }} 1x, {{ image | img_url: '1200x1200', scale: 2 }} 2x"
                                src="{{ image | img_url: '600x600' }}"
                                loading="lazy"
                                alt="{{ variant_image_alt | escape }}">
                            </picture>
                          {% else %}
                            <picture>
                              <div class="object-fit-cover img-placeholder h-100 w-100">
                                {{ 'image' | placeholder_svg_tag: 'placeholder-svg h-100' }}
                              </div>
                            </picture>
                          {% endif %}
                        </figure>
                      </div>
                    </div>
                  </div>
                {%- endfor -%}
              </div>
              {%- if variant_image_strs.size > 1 -%}
                <div class="as-inside-prev swiper-button-prev d-none d-md-block">
                  <span>{% render 'icon-chevron-circle-left' %}</span>
                </div>
                <div class="as-inside-next swiper-button-next d-none d-md-block">
                  <span>{% render 'icon-chevron-circle-right' %}</span>
                </div>
                <div class="as-inside-pagination swiper-pagination inside-swiper-pagination"></div>
              {%- endif -%}
            </div>
            {%- if show_thumbnails -%}
              {%- if variant_image_strs.size > 1 -%}
                <thumbnail-gallery class="thumbnail-swiper as-thumbnail-gallery d-none d-md-block">
                  <div class="position-relative">
                    <div thumbsSlider="" class="swiper as-gallery-modal-thumnails-swiper opacity-0">
                      <div class="swiper-wrapper">
                        {%- for variant_image_str in variant_image_strs -%}
                          {%- liquid
                            assign variant_image = variant_image_str | split: '||'
                            assign variant_image_pos = variant_image[0] | plus: 0 | minus: 1
                            assign variant_image_alt = variant_image[1]
                          -%}
                          {%- assign image = product.images[variant_image_pos] -%}
                          <div class="swiper-slide {% if forloop.first %}swiper-gallery-thumb-active{% endif %}">
                            <figure class="ratio ratio-1x1 mb-0">
                              {% if image != blank %}
                                <picture>
                                  <img class="object-fit-cover" width="64" height="64"
                                    srcset="{{ image | img_url: '64x64' }} 1x, {{ image | img_url: '64x64', scale: 2 }} 2x"
                                    src="{{ image | img_url: '64x64' }}"
                                    loading="lazy"
                                    alt="{{ variant_image_alt | escape }}">
                                </picture>
                              {% else %}
                                <picture>
                                  <div class="object-fit-cover img-placeholder">
                                    {{ 'image' | placeholder_svg_tag: 'placeholder-svg' }}
                                  </div>
                                </picture>
                              {% endif %}
                            </figure>
                          </div>
                        {%- endfor -%}
                      </div>
                    </div>
                  </div>
                </thumbnail-gallery>
              {%- endif -%}
          {%- endif -%}
          </div>
        </div>
      </div>
    </gallery-modal>
  {%- endfor -%}
</div>
{% render 'structured-product' %}
<style>
  .product .purchase-section .media-wrap-container .button_cover_app_block{
    display:flex;
    position:relative;
  }
  .kik-max2-product .purchase-section{
    margin-top: 40px !important;
  }
  .kik-max2-product .purchase-section .media-wrap-container .info-wrap-col .purchase-main .product-title{
    font-weight: 700;
    font-size: 40px;
    line-height: 120%;
    letter-spacing: 0px;
    margin-bottom: 8px;
  }
  .kik-max2-product .purchase-section .media-wrap-container .info-wrap-col .purchase-main .product-price{
    padding-left: 3px;
    margin-bottom: 27px;
  }
  .kik-max2-product .purchase-section .media-wrap-container .info-wrap-col .purchase-main .product-price .price__sale{
    gap:12px;
  }
  .kik-max2-product .purchase-section .media-wrap-container .info-wrap-col .purchase-main .product-price .price__last,
  .kik-max2-product .purchase-section .media-wrap-container .info-wrap-col .purchase-main .product-price .price__compare{
    margin: 0 !important;
  }
  .kik-max2-product .purchase-section .media-wrap-container .info-wrap-col .purchase-main .text-icon-wrapper{
    display: none !important;
  }
  .kik-max2-product .purchase-section .media-wrap-container .info-wrap-col .purchase-main .product-price .price__last .price-item{
    font-weight: 700;
    font-size: 24px;
    line-height: 120%;
    letter-spacing: 0px;
    text-align: right;
    color:#007AFF !important;
  }
  .kik-max2-product .purchase-section .media-wrap-container .info-wrap-col .purchase-main .product-price .price__compare .price-item{    
    font-weight: 500;
    font-size: 18px;
    line-height: 150%;
    letter-spacing: 0px;
    text-align: right;
    color:#5D5E5F;
  }
  .kik-max2-product .purchase-section .media-wrap-container .info-wrap-col .purchase-main .product-price .price__badge-sale{
    padding: 6px 12px;    
    font-weight: 100;
    font-size: 12px;
    line-height: 150%;
    letter-spacing: 0px;
    text-align: center;
    border-radius:4px;
  }
  .kik-max2-product .purchase-section .media-wrap-container .info-wrap-col .purchase-main .richtext-description p{
    font-weight: 400;
    font-size: 16px;
    line-height: 150%;
    letter-spacing: 0px;
    color:#353535;
  }
  .kik-max2-product .purchase-section .media-wrap-container .info-wrap-col .purchase-main .richtext-description{
    margin-bottom: 24px;
  }
  .kik-max2-product .purchase-section .media-wrap-container .info-wrap-col .purchase-main .cover-accessories-selection .accessories-selection .summarize .headline{
    font-weight: 700;
    font-size: 20px;
    line-height: 120%;
    letter-spacing: 0px;
  }
  .kik-max2-product .purchase-section .media-wrap-container .info-wrap-col .purchase-main .cover-accessories-selection .accessories-selection .summarize .need-help{
    font-weight: 700;
    font-size: 20px;
    line-height: 120%;
    letter-spacing: 0px;
  }
  .kik-max2-product .purchase-section .media-wrap-container .info-wrap-col .purchase-main .cover-accessories-selection .accessories-selection .cover_exprods{
    margin-top:24px;
    max-height: 225px;
    overflow-y: scroll;
    scrollbar-width: thin;
    scrollbar-color: black #E3E3E3;
  }
  .kik-max2-product .purchase-section .media-wrap-container .info-wrap-col .purchase-main .cover-accessories-selection .accessories-selection .cover_exprods::-webkit-scrollbar {
    width: 2px;
  } 
  .kik-max2-product .purchase-section .media-wrap-container .info-wrap-col .purchase-main .cover-accessories-selection .accessories-selection .cover_exprods::-webkit-scrollbar-track {
    background: #E3E3E3;
  }
  .kik-max2-product .purchase-section .media-wrap-container .info-wrap-col .purchase-main .cover-accessories-selection .accessories-selection .cover_exprods::-webkit-scrollbar-thumb {
    background-color: #000;
    border-radius: 3px;
  }
  .kik-max2-product .purchase-section .media-wrap-container .info-wrap-col .purchase-main .cover-accessories-selection .accessories-selection .cover_exprods::-webkit-scrollbar-button {
    width: 0;
    height: 0;
    display: none;
  }
  .kik-max2-product .purchase-section .media-wrap-container .info-wrap-col .purchase-main .cover-accessories-selection .accessories-selection .cover_exprods .item-accessories{
    padding: 10px;
    min-height: initial;
  } 
  .kik-max2-product .purchase-section .media-wrap-container .info-wrap-col .purchase-main .cover-accessories-selection .accessories-selection .cover_exprods .item-accessories .product-img{
    width:73px;
    height:73px;
  }
  .kik-max2-product .purchase-section .media-wrap-container .info-wrap-col .purchase-main .cover-accessories-selection .accessories-selection .cover_exprods .item-accessories .product-msg{
    margin-left: 10px;
    margin-right: 5px;
  }
  .kik-max2-product .purchase-section .media-wrap-container .info-wrap-col .purchase-main .cover-accessories-selection .accessories-selection .cover_exprods .item-accessories .product-msg .name{    
    font-weight: 500 !important;
    font-size: 18px;
    line-height: 150%;
    letter-spacing: 0px;
    color:#000000;
  }
  .kik-max2-product .purchase-section .media-wrap-container .info-wrap-col .purchase-main .cover-accessories-selection .accessories-selection .cover_exprods .item-accessories .product-msg .description p{
    margin: 0;
  }
  .kik-max2-product .purchase-section .media-wrap-container .info-wrap-col .purchase-main .cover-accessories-selection .accessories-selection .cover_exprods .item-accessories .product-msg .description p.p1{
    display: inline-block;
  }
  .kik-max2-product .purchase-section .media-wrap-container .info-wrap-col .purchase-main .cover-accessories-selection .accessories-selection .cover_exprods .item-accessories .product-msg .description p:not(:first-child):last-child{
    display: none;
  }
  .kik-max2-product .purchase-section .media-wrap-container .info-wrap-col .purchase-main .cover-accessories-selection .accessories-selection .cover_exprods .item-accessories .product-msg .description p.p1 strong{
    padding-top:4px;
    font-weight: 400;
    font-size: 14px;
    line-height: 150%;
    letter-spacing: 0px;
    color:#353535;
  }
  .kik-max2-product .purchase-section .media-wrap-container .info-wrap-col .purchase-main .cover-accessories-selection .accessories-selection .cover_exprods .item-accessories .product-msg .description p.p1 strong span a{
    color:#353535 !important;
  }
  .kik-max2-product .purchase-section .media-wrap-container .info-wrap-col .purchase-main .cover-accessories-selection .accessories-selection .cover_exprods .item-accessories .price {
    position: absolute;
    right: 10px;
    top: 10px;
    left: auto;
    bottom: auto;
    display: flex;
    gap:8px;
  }
  .kik-max2-product .purchase-section .media-wrap-container .info-wrap-col .purchase-main .cover-accessories-selection .accessories-selection .cover_exprods .item-accessories .price .price-new{
    font-weight: 500;
    font-size: 18px;
    line-height: 150%;
    letter-spacing: 0px;
    text-align: right;
    color: #007AFF;

  }
  .kik-max2-product .purchase-section .media-wrap-container .info-wrap-col .purchase-main .cover-accessories-selection .accessories-selection .cover_exprods .item-accessories .price .price-old{
    font-family: HarmonyOS Sans;
    font-weight: 400;
    font-size: 18px;
    line-height: 150%;
    letter-spacing: 0px;
    text-align: right;
    color:#353535;
  }
  .kik-max2-product .purchase-section .media-wrap-container .info-wrap-col .purchase-main .cover-accessories-selection .accessories-selection{
    margin-bottom: 24px;
  }
  .kik-max2-product .purchase-section .media-wrap-container .info-wrap-col .purchase-main .cover-accessories-selection .accessories-selection .cover_exprods .single_cover{
    margin-bottom:10px;
  }
  .kik-max2-product .purchase-section .media-wrap-container .info-wrap-col .purchase-main .variant_picker{
    margin-bottom: 24px;
  }
  .kik-max2-product .purchase-section .media-wrap-container .info-wrap-col .purchase-main .variant_picker .option-title{
    margin-bottom: 20px;
  }
  .kik-max2-product .purchase-section .media-wrap-container .info-wrap-col .purchase-main .cover_total_price{
    margin-bottom: 16px;
  }
  .kik-max2-product .purchase-section .media-wrap-container .info-wrap-col .purchase-main .cover_total_price .title_total{
    font-weight: 700;
    font-size: 24px;
    line-height: 120%;
    letter-spacing: 0px;
    text-align: right;
    display: inline-block;
    color:#000000;
    margin-right: 10px;
  }
  .kik-max2-product .purchase-section .media-wrap-container .info-wrap-col .purchase-main .cover_total_price .as-product-price{
    font-weight: 700;
    font-size: 24px;
    line-height: 120%;
    letter-spacing: 0px;
    text-align: right;
    display: inline-block;
    color:#007AFF;
  } 
  .kik-max2-product .purchase-section .media-wrap-container .info-wrap-col .purchase-main .cover_total_price .as-product-compare-at-price{
    font-weight: 500;
    font-size: 18px;
    line-height: 150%;
    letter-spacing: 0px;
    color:#5D5E5F;
    display: inline-block;
    margin-left: 12px;
  }
  .kik-max2-product .purchase-section .media-wrap-container .info-wrap-col .purchase-main .as-paypal-installment{
    margin-bottom: 16px;
  }
  .kik-max2-product .purchase-section .media-wrap-container .info-wrap-col .purchase-main .stock_alert_message{
    margin-bottom: 24px;
  }
  .kik-max2-product .purchase-section .media-wrap-container .info-wrap-col .purchase-main .stock_alert_message .stock_alert{
    padding-left: 26px;
    margin-bottom: 0;
    position: relative;
    font-weight: 400;
    font-size: 16px;
    line-height: 150%;
    letter-spacing: 0px;
    color:#353535;
  }
  .kik-max2-product .purchase-section .media-wrap-container .info-wrap-col .purchase-main .stock_alert_message .stock_alert:after{
    content: '';
    position: absolute;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #007AFF;
    left: 4px;
    top: 50%;
    transform: translateY(-50%);
  }
  .kik-max2-product .purchase-section .media-wrap-container .info-wrap-col .purchase-main .stock_alert_message .stock_alert:before{
    content: '';
    position: absolute;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: rgba(0, 122, 255,0.3);
    left: 0;
    top: 50%;
    transform: translateY(-50%);
  }
  .kik-max2-product .purchase-section .media-wrap-container .info-wrap-col .purchase-main .buy_button_cover button.btn-primary{
    width: 100%;
    padding-top: 12px;
    padding-bottom: 12px;
    font-weight: 700;
    font-size: 16px;
    line-height: 150%;
    letter-spacing: 0px;
    background: #007AFF;
  }
  .kik-max2-product .purchase-section .media-wrap-container .info-wrap-col .purchase-main .cover_icon_text{
    margin-top:24px;
    display: flex;
    margin-bottom:24px;
  }
  .kik-max2-product .purchase-section .media-wrap-container .info-wrap-col .purchase-main .cover_icon_text .cover_single{
    width: 33.33%;
    display: flex;
    flex-flow: column;
    align-items: center;
    gap: 8px;
  }
  .kik-max2-product .purchase-section .media-wrap-container .info-wrap-col .purchase-main .cover_icon_text .cover_single .text_data p{
    margin-bottom: 0;
    font-weight: 400;
    font-size: 14px;
    line-height: 16px;
    letter-spacing: 0px;
    color:#000;
  }
  .kik-max2-product .purchase-section .media-wrap-container .info-wrap-col .purchase-main .cover_accordin .accordian_content{
    display: none;
    padding-left:10px;
    padding-right:10px;
  }
  .kik-max2-product .purchase-section .media-wrap-container .info-wrap-col .purchase-main .cover_accordin .accordian_head{
    padding-top: 24px;
    padding-bottom: 24px;
    position: relative;
    cursor: pointer;
  }
  .kik-max2-product .purchase-section .media-wrap-container .info-wrap-col .purchase-main .cover_accordin .accordian_head .title{
    font-family: var(--se-font-sans-serif);
    font-weight: 700;
    font-size: 20px;
    line-height: 120%;
    letter-spacing: 0px;
    text-align: right;
  }
  .kik-max2-product .purchase-section .media-wrap-container .info-wrap-col .purchase-main .cover_accordin .accordian_head:after{
    content:'';
    position: absolute;
    height:8px;
    width:8px;
    border-bottom:2px solid #000;
    border-right:2px solid #000;
    top: 50%;
    transition-duration: 0.5s;
    transform: rotate(-45deg) translateY(-50%);
    right: 6px;
  }
  .kik-max2-product .purchase-section .media-wrap-container .info-wrap-col .purchase-main .cover_accordin{
    border-top:1px solid #000;
  }
  .kik-max2-product .purchase-section .media-wrap-container .info-wrap-col .purchase-main .cover_accordin.texes{
    border-bottom:1px solid #000;
  }
  .kik-max2-product .purchase-section .media-wrap-container .info-wrap-col .purchase-main .cover_accordin.active .accordian_head:after{
    transition-duration: 0.5s;
    transform: rotate(45deg) translateY(-50%);
  }
  .kik-max2-product .purchase-section .media-wrap-container .media-wrap-row .media-wrap-col .gallery-wrap .as-gallery-wrapper .as-outside-pagination{
    /* position: absolute;
    top: 0;
    height: min-content;
    justify-content: flex-end;
    z-index: 99;
    display: none; */
  }
  .kik-max2-product .purchase-section .media-wrap-container .media-wrap-row .media-wrap-col .gallery-wrap .as-gallery-wrapper .swiper-wrapper thumbnail-gallery.thumbnail-swiper .swiper-slide figure.ratio{
    width: 64px;
    height:70px;
  }
  .kik-max2-product .purchase-section .media-wrap-container .media-wrap-row .media-wrap-col .gallery-wrap .as-gallery-wrapper .swiper-wrapper thumbnail-gallery.thumbnail-swiper .swiper-wrapper .swiper-slide{
    border-radius: 0;
    border:1px solid #999999;
  }
  .kik-max2-product .purchase-section .media-wrap-container .media-wrap-row .media-wrap-col .gallery-wrap .as-gallery-wrapper .swiper-wrapper thumbnail-gallery.thumbnail-swiper .swiper-wrapper .swiper-slide.swiper-gallery-thumb-active{
    border:1px solid #000000;
  }
  .kik-max2-product .purchase-section .media-wrap-container .as-gallery-wrapper{
    position: relative;
  }
  .kik-max2-product .purchase-section .media-wrap-container .as-gallery-wrapper .cover_app_block,
  .kik-max2-product .purchase-section .media-wrap-container .button_cover_app_block .cover_app_block{
    position: absolute;
    top: 16px;
    z-index: 99;
    right: 16px;
  }
  .kik-max2-product .purchase-section .media-wrap-container .as-gallery-wrapper .cover_app_block .custom-button .btn,
  .kik-max2-product .purchase-section .media-wrap-container .button_cover_app_block .cover_app_block .custom-button .btn{
    background: #007AFF;
    border: 0;
    color: #fff;
    height: auto !important;
    display: flex;
    gap: 8px;
    align-items: center;
    padding: 8.5px 24px;
  }
  .kik-max2-product .purchase-section .media-wrap-container .as-gallery-wrapper .cover_app_block .custom-button .btn span,
  .kik-max2-product .purchase-section .media-wrap-container .button_cover_app_block .cover_app_block .custom-button .btn span{
    font-weight: 700;
    font-size: 14px;
    line-height: 150%;
    letter-spacing: 0px;
  }
  .kik-max2-product .purchase-section .media-wrap-container .as-gallery-wrapper .cover_app_block .custom-button .btn svg,
  .kik-max2-product .purchase-section .media-wrap-container .button_cover_app_block .cover_app_block .custom-button .btn svg{
    width:20px;
    height: auto;
  }
  .kik-max2-product .purchase-section .media-wrap-container .as-gallery-wrapper .cover_app_block .shopify-app-block,
  .kik-max2-product .purchase-section .media-wrap-container .button_cover_app_block .cover_app_block .shopify-app-block{
    display: none;
  }
  html body.template_suff_kik-max-2.modal-open .modal{
    background: rgba(0, 0, 0, 0.6);
  }
  @media(max-width:768px){
    .kik-max2-product .purchase-section{
      margin-top:0px !important;
    }
    .kik-max2-product .purchase-section .media-wrap-container .media-wrap-row .media-wrap-col .gallery-wrap .as-gallery-wrapper .as-outside-pagination{
      /* justify-content: flex-start;
      display: none; */
    }
    .kik-max2-product .purchase-section .media-wrap-container .media-wrap-row .media-wrap-col .gallery-wrap .swiper-slide .as-inside-pagination{
      padding: 8px 16px;
      background: #C9C9C9 !important;
      z-index: 999;
    }
    .kik-max2-product .purchase-section .media-wrap-container .media-wrap-row .media-wrap-col .gallery-wrap .swiper-slide .as-inside-pagination span{
      font-family: Inter,sans-serif;
      font-weight: 500;
      font-size: 14px;
      line-height: 150%;
      letter-spacing: 0px;
      color:#fff; 
    }
    .kik-max2-product .purchase-section .media-wrap-container .info-wrap-col .sticky-top-section{
      margin-top: 0px !important;
      padding-left: 8px !important;
      padding-right: 8px !important;
      padding:0!important;
    }
    .kik-max2-product .purchase-section .media-wrap-container .info-wrap-col .sticky-top-section .purchase-main .text-icon-wrapper{
      display: none !important;
    }
    .kik-max2-product .purchase-section .media-wrap-container .info-wrap-col .purchase-main .product-title{
      font-weight: 700;
      font-size: 32px;
      line-height: 120%;
      letter-spacing: 0px;
      margin-bottom: 6px;
    }
    .kik-max2-product .purchase-section .media-wrap-container .info-wrap-col .purchase-main .product-price{
      margin-bottom: 24px;
    }
    .kik-max2-product .purchase-section .media-wrap-container .info-wrap-col .purchase-main .product-price .price__last .price-item{
      font-weight: 700;
      font-size: 24px;
      line-height: 120%;
      letter-spacing: 0px;
    }
    .kik-max2-product .purchase-section .media-wrap-container .info-wrap-col .purchase-main .richtext-description p{
      font-size: 14px;
    }
    .kik-max2-product .purchase-section .media-wrap-container .info-wrap-col .purchase-main .cover-accessories-selection .accessories-selection .cover_exprods{

    }
    .kik-max2-product .purchase-section .media-wrap-container .info-wrap-col .purchase-main .cover-accessories-selection .accessories-selection .cover_exprods .item-accessories .product-img{
      width: 56px;
      height: 56px;
    }
    .kik-max2-product .purchase-section .media-wrap-container .info-wrap-col .purchase-main .cover-accessories-selection .accessories-selection .cover_exprods .item-accessories .cover_content{
      margin-left: 10px;
    }
    .kik-max2-product .purchase-section .media-wrap-container .info-wrap-col .purchase-main .cover-accessories-selection .accessories-selection .cover_exprods .item-accessories .cover_content .product-msg{
      margin-left: 0;
    }
    .kik-max2-product .purchase-section .media-wrap-container .info-wrap-col .purchase-main .cover-accessories-selection .accessories-selection .cover_exprods .item-accessories .cover_content .product-msg .name{      
      font-weight: 700 !important;
      font-size: 14px;
      line-height: 150%;
      letter-spacing: 0px;
      margin-bottom: 4px;
    }
    .kik-max2-product .purchase-section .media-wrap-container .info-wrap-col .purchase-main .cover-accessories-selection .accessories-selection .cover_exprods .item-accessories .price{
      position: static;
      margin-top: 0 !important;
    }
    .kik-max2-product .purchase-section .media-wrap-container .info-wrap-col .purchase-main .cover-accessories-selection .accessories-selection .cover_exprods .item-accessories .price .price-new{
      font-size: 14px;
    }
    .kik-max2-product .purchase-section .media-wrap-container .info-wrap-col .purchase-main .cover-accessories-selection .accessories-selection .cover_exprods .item-accessories .price .price-old{
      margin-left:0 !important;
      font-size: 14px;
    }
    .kik-max2-product .purchase-section .media-wrap-container .info-wrap-col .purchase-main .cover-accessories-selection .accessories-selection .cover_exprods .item-accessories .description p strong{
      font-weight: 400;
      font-size: 14px;
      line-height: 150%;
      letter-spacing: 0px;
    }
    .kik-max2-product .purchase-section .media-wrap-container .info-wrap-col .purchase-main .cover-accessories-selection .accessories-selection .cover_exprods .item-accessories .description p{
      margin-bottom: 0 !important;
    }
    .kik-max2-product .purchase-section .media-wrap-container .info-wrap-col .purchase-main .cover-accessories-selection .accessories-selection .cover_exprods .item-accessories .description{
      margin-top:4px !important;
    }
    .kik-max2-product .purchase-section .media-wrap-container .info-wrap-col .purchase-main .cover-accessories-selection .accessories-selection .cover_exprods .item-accessories .description p strong span a{
      color:#353535 !important;
    }
    .kik-max2-product .purchase-section .media-wrap-container .info-wrap-col .purchase-main .cover-accessories-selection .accessories-selection .cover_exprods .item-accessories .description p:not(:first-child):last-child{
      display: none;
    }
    .kik-max2-product .purchase-section .media-wrap-container .info-wrap-col .purchase-main .cover_total_price{
      margin-top: 16px;
    }
    .kik-max2-product .purchase-section .media-wrap-container .info-wrap-col .purchase-main .cover_total_price .title_total{ 
      font-weight: 700;
      font-size: 20px;
      line-height: 120%;
      letter-spacing: 0px;
    }
    .kik-max2-product .purchase-section .media-wrap-container .info-wrap-col .purchase-main .cover_total_price .as-product-price{
      font-weight: 700;
      font-size: 20px;
      line-height: 120%;
      letter-spacing: 0px;
    }
    .kik-max2-product .purchase-section .media-wrap-container .info-wrap-col .purchase-main .cover_total_price .as-product-compare-at-price{
      font-weight: 400;
      font-size: 14px;
      line-height: 150%;
      letter-spacing: 0px;
      color:#000;
    }
    .kik-max2-product .purchase-section .media-wrap-container .info-wrap-col .purchase-main .stock_alert_message .stock_alert{
      font-weight: 400;
      font-size: 14px;
      line-height: 150%;
      letter-spacing: 0px;
    }
    .kik-max2-product .purchase-section .media-wrap-container .info-wrap-col .purchase-main .buy_button_cover button.btn-primary{
      height: 40px !important;
      padding: 6px 20px;
    }
    .kik-max2-product .purchase-section .media-wrap-container .info-wrap-col .purchase-main .cover_icon_text .cover_single .image_icon{
      width: 40px;
    }
    .kik-max2-product .purchase-section .media-wrap-container .info-wrap-col .purchase-main .cover_icon_text .cover_single .image_icon img,
    .kik-max2-product .purchase-section .media-wrap-container .info-wrap-col .purchase-main .cover_icon_text .cover_single .image_icon svg{
      width: 100%;
    }
    .kik-max2-product .purchase-section .media-wrap-container .info-wrap-col .purchase-main .cover_icon_text .cover_single .text_data{
      text-align: center;
    }
    .kik-max2-product .purchase-section .media-wrap-container .info-wrap-col .purchase-main .cover_accordin .accordian_head .title{
      font-weight: 700;
      font-size: 18px;
      line-height: 120%;
      letter-spacing: 0px;
      text-align: right;
    }
    .kik-max2-product .purchase-section .media-wrap-container .as-gallery-wrapper{
      display:block;
    }
    .kik-max2-product .purchase-section .media-wrap-container .as-gallery-wrapper .cover_app_block,
    .kik-max2-product .purchase-section .media-wrap-container .button_cover_app_block .cover_app_block{
      position: absolute;
      left:16px;
      right:auto;
    }
    html body.template_suff_kik-max-2 .kik-max2-product .purchase-section .media-wrap-container{
      padding-left: 0px !important;
      padding-right: 0px !important;
    }
    html body.template_suff_kik-max-2 .kik-max2-product .purchase-section .media-wrap-container .info-wrap-col{
      padding-left: 16px;
      padding-right:16px;
    }
  }
</style>
<script>
  document.querySelectorAll('.cover_accordin .accordian_head').forEach(function(header) {
    header.addEventListener('click', function(e) {
      const cover = this.closest('.cover_accordin');
      cover.classList.toggle('active');
      const content = cover.querySelector('.accordian_content');
      if (content.style.display === 'block') {
        content.style.display = 'none';
      } else {
        content.style.display = 'block';
      }
    });
  });
  document.addEventListener('DOMContentLoaded', function () {
    const element = document.querySelector(
      '.kik-max2-product .purchase-section .info-wrap-col .purchase-main .cover-accessories-selection .cover_exprods .no-accesories .item-accessories'
    );
    if (element) {
      element.click();
    }
  });
  function remove_all_active(){
    const item_acces = document.querySelector(
      '.kik-max2-product .purchase-section .info-wrap-col .purchase-main .cover-accessories-selection .cover_exprods .no-accesories .item-accessories'
    );
    if(item_acces) {
      item_acces.click();
    }
  }
  $(document).on('click','.kik-max2-product .purchase-section .info-wrap-col .purchase-main .buy_button_cover button.btn-primary',function(e){
    var href = $('.kik-max2-product .purchase-section .info-wrap-col .purchase-main shop-with-us .add-to-cart-wrap .as-checkout-btn').attr('href');
    window.location.href = href;
  })
  function countActiveAccessoriesInCoverExprods() {
    const container = document.querySelector('.purchase-main .cover-accessories-selection .accessories-selection .cover_exprods');
    if (!container) return 0;
    const activeItems = container.querySelectorAll('.item-accessories.active');
    return Array.from(activeItems).filter(item => !item.closest('.no-accesories')).length;
  }
$('.purchase-section .cover-accessories-selection .cover_exprods .item-accessories').on('click',function(e){
    setTimeout(function(e){
      const count = countActiveAccessoriesInCoverExprods();
      if(count > 0){
        $('shop-with-us .prod_title .accessory-count').html('+ '+count+' Accessories');
      }else{
        // remove_all_active();
        $('shop-with-us .prod_title .accessory-count').html(' ');
      }
    },500)
})
// $(document).on('click','.purchase-section .cover-accessories-selection .cover_exprods .single_cover .as-item-accessories',function(e){
//   var current = $(this);
//   var count_actives = countActiveAccessoriesInCoverExprods();
//   if($(this).hasClass('active')){    
//     if(count_actives === 1){
//       //remove_all_active();
//       console.log('count_actives',count_actives);
//     }
//   }else{  
//     setTimeout(function(e){
//       console.log(count_actives);
//       if(count_actives == 1){
//         //remove_all_active();
//       }
//     },1000)
//   }
// })
$(document).on('click', '.purchase-section .cover-accessories-selection .cover_exprods .single_cover .as-item-accessories', function (e) {
  setTimeout(function () {
    var activeItems = $('.cover_exprods .as-item-accessories.active');
    var activeCount = activeItems.length;
    $('.cover_exprods .single_cover').removeClass('last_active');
    if (activeCount === 1) {
      activeItems.closest('.single_cover').addClass('last_active');
    } 
  }, 50);
});
$(document).on('click', '.purchase-section .cover-accessories-selection .cover_exprods .single_cover.last_active .as-item-accessories',function(e){
  var current = $(this);
  setTimeout(function () {
    current.parents('.single_cover').removeClass('last_active');
    remove_all_active();
  }, 50);
});

</script>
{% javascript %}
  (function() {
    var $url = document.querySelector('.as-main-product-v2-script')
    if (!window.productV2 && $url && $url.dataset.designMode !== 'yes') {
      window.productV2 = $url.value
      var $script = document.createElement('script')
      $script.src = window.productV2
      $script.defer = "defer"
      document.body.appendChild($script)
    }
  })()
{% endjavascript %}

{% comment %}
{% unless request.design_mode %}
  <script src="{{ 'main-product-v2.min.js' | asset_url }}" defer></script>
{% endunless %}
{% endcomment %}

{% schema %}
  {
    "name": "Product",
    "tag": "section",
    "class": "main-product-v3 as-main-product-v2 kik-max2-product",
   "settings": [
    {
      "type": "select",
      "id": "deskyop_layout",
      "label": "Desktop layout",
      "options": [
        {
          "value": "thumbnails",
          "label": "Thumbnails"
        },
        {
          "value": "no_thumbnails",
          "label": "No Thumbnails"
        }
      ],
      "default": "no_thumbnails"
    },
    {
      "type": "select",
      "id": "desktop_media_size",
      "label": "Desktop media size",
      "options": [
        {
          "value": "small",
          "label": "Small"
        },
        {
          "value": "medium",
          "label": "Medium"
        },
        {
          "value": "large",
          "label": "Large"
        }
      ],
      "default": "medium",
      "info": "Media is automatically optimized for mobile."
    },
    {
      "type": "checkbox",
      "id": "enable_video_looping",
      "label": "Enable video looping",
      "default": false
    },
    {
      "type": "checkbox",
      "id": "show_try_on",
      "label": "Show try on button"
    },
    {
      "type": "textarea",
      "id": "try_on_svg",
      "label": "Enter svg code here"
    },
    {
      "type": "text",
      "id": "try_on_text",
      "label": "Enter try on button text"
    },
    {
      "type": "header",
      "content": "Add to cart"
    },
    {
      "type": "checkbox",
      "id": "hide_add_to_cart",
      "label": "hide add to cart",
      "default": false
    },
    {
      "type": "header",
      "content": "Notify me"
    },
    {
      "type": "checkbox",
      "id": "show_notify_me",
      "label": "Show notify me",
      "default": false
    },
    {
      "type": "text",
      "id": "notify_me_heading",
      "label": "Heading",
      "default": "Nofify me if it arrives"
    },
    {
      "type": "richtext",
      "id": "notify_me_text",
      "label": "Text",
      "default": "<p>Thanks for your interest. Please leave your email and we will send you a notification as soon as we have the item in stock.</p>"
    },
    {
      "type": "richtext",
      "id": "notify_me_note",
      "label": "Note",
      "default": "<p>You can opt-out at any time. See our Privacy Policy and Terms .</p>"
    },
    {
      "type": "text",
      "id": "subscribe_tag",
      "label": "Subscribe tag",
      "default": "notify_me",
      "info": "Separate each tag with an English comma"
    },
    {
      "type": "color",
      "id":"product_price",
      "label": "Select Product price color"
    },
    {
      "type": "color",
      "id":"compare_price",
      "label": "Select Product compare price color"
    },
    {
      "type": "color",
      "id":"product_badge_bg_color",
      "label": "Select badge background color"
    },
    {
      "type": "color",
      "id":"product_badge_tx_color",
      "label": "Select badge text color"
    }
   ],
    "blocks": [
      {
        "type": "title",
        "name": "Title",
        "limit": 1
      },
      {
        "type": "buy_button",
        "name": "Buy buttons",
        "limit": 1,
        "settings": [
          {
            "type": "text",
            "id": "button_label",
            "label": "Button label"
          }
        ]
      },
      {
        "type": "line",
        "name": "Line",
        "limit": 1,
        "settings": [
          {
            "type": "select",
            "id": "top_space",
            "label": "Top space",
            "options": [
              {
                "value": "pt-1",
                "label": "Small"
              }, {
                "value": "pt-2",
                "label": "Medium"
              }, {
                "value": "pt-5",
                "label": "Large"
              }
            ],
            "default": "pt-2"
          }, {
            "type": "select",
            "id": "bottom_space",
            "label": "Bottom space",
            "options": [
              {
                "value": "pb-1",
                "label": "Small"
              }, {
                "value": "pb-2",
                "label": "Medium"
              }, {
                "value": "pb-5",
                "label": "Large"
              }
            ],
            "default": "pb-2"
          }
        ]
      },
      {
        "type": "price",
        "name": "Price",
        "limit": 1,
        "settings": [
          {
            "type": "checkbox",
            "id": "show_star",
            "label": "Show star ratting"
          }
        ]
      },
      {
        "type": "paypal",
        "name": "Paypal message",
        "limit": 1
      },
      {
        "type": "variant_picker",
        "name": "Variant picker",
        "limit": 1,
        "settings": [
          {
            "type": "radio",
            "id": "type",
            "label": "Type",
            "options": [
              {
                "value": "button",
                "label": "Button"
              },
              {
                "value": "dropdown",
                "label": "Dropdown"
              }
            ],
            "default": "button"
          },
          {
            "type": "checkbox",
            "id": "enable_color_swatches",
            "label": "Enable color swatches",
            "default": false
          },
          {
            "type": "text",
            "id": "swatch_option_name",
            "label": "Swatch option name",
            "info": "Enter the name of the product option you wish to turn into color swatches (i.e, Color)"
          },
          {
            "type": "textarea",
            "id": "color_swatches_rule_configuration",
            "label": "Color swatches rule configuration",
            "info": "Format is \"option value:color value\",Each rule must be separated by a semicolon(\";\"). \",for example:\"Light grey:#e0dddd;Pink:#f127b6;Dark yellow:dark-yellow.png;\""
          },
          {
            "type": "textarea",
            "id": "options_marker",
            "label": "Marker",
            "info": "Format is \"option value:marker_text:marker_background_color\",Each rule must be separated by a semicolon(\";\"). \",for example:\"Rokid Max AR Glasses:NEW:#007AFF;Black:HOT:#FF003D;\""
          }
        ]
      },
      {
        "type": "quantity_selector",
        "name": "Quantity selector",
        "limit": 1
      },
      {
        "type": "description",
        "name": "Description",
        "limit": 1
      },
      {
        "type": "share",
        "name": "Share",
        "limit": 1,
        "settings": [
          {
            "type": "paragraph",
            "content": "A page title and description are included with the preview image. [Learn more](https://help.shopify.com/en/manual/promoting-marketing/seo/adding-keywords#set-a-title-and-description-for-your-online-store)"
          },
          {
            "type": "paragraph",
            "content": "If you include a link in social media posts, the page's featured image will be shown as the preview image. [Learn more](https://help.shopify.com/en/manual/online-store/images/showing-social-media-thumbnail-images)"
          }
        ]
      },
      {
        "type": "payment_methods",
        "name": "Payment methods",
        "limit": 1
      },
      {
        "type": "text",
        "name": "Text",
        "settings": [
          {
            "type": "image_picker",
            "id": "advert_icon",
            "label": "Icon"
          },
          {
            "type": "color",
            "id": "text_color",
            "label": "Text color"
          },
          {
            "type": "text",
            "id": "text",
            "label": "Text",
            "default": "<p>Tell a unique detail about this product.</p>"
          },
          {
            "type": "header",
            "content": "Advanced settings"
          },
          {
            "type": "select",
            "id": "text_type",
            "label": "Text type",
            "options": [
              {
                "value": "uppercase",
                "label": "Uppercase"
              },
              {
                "value": "body",
                "label": "Body"
              },
              {
                "value": "footnote",
                "label": "Footnote"
              }
            ],
            "default": "uppercase"
          },
          {
            "type": "select",
            "id": "margin_bottom",
            "label": "Space bottom",
            "options": [
              {
                "value": "mb-1",
                "label": "Small"
              },
              {
                "value": "mb-2",
                "label": "Medium"
              },
              {
                "value": "mb-6",
                "label": "Large"
              }
            ],
            "default": "mb-6"
          }
        ]
      },
      {
        "type": "recommendations",
        "name": "Recommendations",
        "limit": 1,
        "settings": [
          {
            "type": "product_list",
            "id": "accessories",
            "label": "Accessories"
          },
          {
            "type": "text",
            "id": "heading",
            "label": "Accessories head"
          },
          {
            "type": "richtext",
            "id": "accessories_text",
            "label": "Accessories text"
          },
          {
            "type": "checkbox",
            "id": "enable_show_more",
            "label": "Enable show more",
            "default": false
          },
          {
            "type": "checkbox",
            "id": "whether_click_image_link_to_purchase_page",
            "label": " Whether click image link to purchase page ",
            "default": true
          }
        ]
      },
      {
        "type": "pop_up",
        "name": "Pop-up",
        "settings": [
          {
            "type": "text",
            "id": "heading",
            "label": "Link label",
            "default": "Pop-up link text"
          },
          {
            "type": "page",
            "id": "page_block",
            "label": "Page"
          }
        ]
      },
      {
        "type": "accessories-selection",
        "name": "Accessories selection",
        "limit": 1,
        "settings": [
            {
                "type": "text",
                "id": "headline",
                "label": "Headline"
            },
            {
                "type": "text",
                "id": "description",
                "label": "Description"
            },
            {
                "type": "checkbox",
                "id": "enable_need_help",
                "label": "Enable Need help",
                "default": true
            },
            {
                "type": "product_list",
                "id": "products",
                "label": "Products"
            }
            
        ]
      },
      {
      "type": "headline_popup",
      "name": "Headline for help popup",
      "settings": [
        {
          "type": "text",
          "id": "headline",
          "label": "Headline"
        }
      ]
    },
    {
      "type": "des_popup",
      "name": "Description help popup",
      "settings": [
        {
          "type": "text",
          "id": "description",
          "label": "Description"
        }
      ]
    },
    {
      "type": "image_popup",
      "name": "Image for help popup",
      "settings": [
        {
          "type": "image_picker",
          "id": "image",
          "label": "image"
        }
      ]
    },
      {
        "type": "prod_total",
        "name":"Show total",
        "settings": [
            {
                "type": "checkbox",
                "id": "show_total",
                "label": "Show total"
            }
        ]
      },
      {
        "type": "stock_alert",
        "name":"Show Stock alert",
        "settings": [
            {
                "type": "checkbox",
                "id": "show_stock_alert",
                "label": "Show stock alert"
            },
            {
                "type": "text",
                "id": "stock_alert_message",
                "label": "Enter Stock alert message"
            }
        ]
      },
      {
        "type":"icon-text",
        "name": "Icon text",
        "settings": [
          {
            "type": "textarea",
            "id": "icon_1_svg",
            "label": "Enter icon 1 svg code"
          },
          {
            "type": "image_picker",
            "id": "icon_1_image",
            "label": "Select icon 1 image"
          },
          {
            "type": "text",
            "id": "icon_1_text",
            "label": "Enter icon 1 text"
          },
          {
            "type": "textarea",
            "id": "icon_2_svg",
            "label": "Enter icon 2 svg code"
          },
          {
            "type": "image_picker",
            "id": "icon_2_image",
            "label": "Select icon 2 image"
          },
          {
            "type": "text",
            "id": "icon_2_text",
            "label": "Enter icon 2 text"
          },
          {
            "type": "textarea",
            "id": "icon_3_svg",
            "label": "Enter icon 3 svg code"
          },
          {
            "type": "image_picker",
            "id": "icon_3_image",
            "label": "Select icon 3 image"
          },
          {
            "type": "text",
            "id": "icon_3_text",
            "label": "Enter icon 3 text"
          }
        ]
      },
      {
        "type":"show_shipping",
        "name":"Add shipping instruction",
        "settings": [
          {
            "type": "checkbox",
            "id": "show_shipping",
            "label": "Show shipping instruction"
          },
          {
            "type": "text",
            "id": "shipping_tx",
            "label": "Add Heading for shipping policy"
          }
        ]
      },
      {
        "type":"show_return",
        "name":"Add return instruction",
        "settings": [
          {
            "type": "checkbox",
            "id": "show_retutn",
            "label": "Show return instruction"
          },
          {
            "type": "text",
            "id": "return_tx",
            "label": "Add Heading for Return Policy"
          }
        ]
      },
      {
        "type":"show_texes",
        "name":"Add texes instruction",
        "settings": [
          {
            "type": "checkbox",
            "id": "show_texes",
            "label": "Show texes instruction"
          },
          {
            "type": "text",
            "id": "texes_tx",
            "label": "Add Heading for Texes"
          }
        ]
      },
      {
        "type": "@app"
      }
    ]
  }
{% endschema %}

{% render 'camweara_snippet' %} 
